/<template>
<div class="Index">
    <header>
        <van-icon name="wap-nav" size="25"/>
        <h3>Huacom 花礼网</h3>
        <van-icon name="audio" size="25"/>
    </header>
    <main>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <van-grid >
            <van-grid-item :icon='item.icon' :text='item.txt' v-for="(item,index) in iconArr" :key="index"/>
        </van-grid>
        <van-grid :column-num="2" v-if="AllList.length>0">
            <van-grid-item v-for="(item, index) in AllList[0].children" :key="index">
                <img  v-lazy="item.src" alt="">
                <h3>{{item.txt}}</h3>
            </van-grid-item>
        </van-grid>
    </main>
</div>
</template>

<script>
import { mapState }  from 'vuex'
export default {
    data(){
        return{
            iconArr : [
                {icon:'fire',txt:'鲜花'},
                {icon:'star',txt:'永生花'},
                {icon:'gem',txt:'蛋糕'},
                {icon:'hot',txt:'礼品'},
            ]
        }
    },
    computed: {
        ...mapState(['AllList'])
    },
    mounted() {
        // console.log(iconArr);
        this.$store.dispatch('asyncList', )
    },
    methods: {
        name() {
            
        },
    },
}
</script>

<style lang="scss">
.Index{
    width: 100%;
    height: 100%;
}
header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(45, 67, 45);
    color: #fff;
    h3{
        color: rgb(157, 92, 42);
    }
}
main{
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
}
</style>